<!--
 * @Description: Lisonglin[2:30 player]
 * @Date: 2021-08-10 11:30:34
 * @LastEditTime: 2021-08-12 21:14:34
 * @FilePath: \web\html\query_data.html
-->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>智慧农业-查询数据</title>
		<style>
			/* css 代码  */
		</style>
		<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
		<script src="../js/jquery-2.2.3.min.js"></script>
		<script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<link type="text/css" href="../css/query_data.css" rel="stylesheet">

		<script type="text/javascript">
			$(document).ready(function () {
				chart1 = Highcharts.chart('container1', {
					chart: {
						plotBackgroundColor: '#E6E6E6',
						type: 'spline',
						width: 740,
						height: 280
					},
					credits: { //版权信息
						enabled: false
					},
					exporting: { //导出
						enabled: false
					},
					title: { //标题
						text: ''
					},
					xAxis: {
						categories: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00',
							'7:00', '8:00', '9:00', '10:00', '11:00', '12:00',
							'13:00', '14:00', '15:00', '16:00', '17:00', '18:00',
							'19:00', '20:00', '21:00', '22:00', '23:00']
					},
					yAxis: {
						title: {
							text: '温湿度'
						},
						labels: {
							formatter: function () {
								return this.value;
							}
						}
					},
					tooltip: {
						crosshairs: true,
						shared: true,
						//valueSuffix: ' ℃'
					},
					plotOptions: {
						spline: { //曲线图
							marker: { //数据点标记
								radius: 4, //半径
								lineColor: '#666666',
								lineWidth: 1 
							}
						}
					},
					series: [{
						name: '温度',
						marker: {
							symbol: 'square'
						},
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
					}, {
						name: '湿度',
						marker: {
							symbol: 'diamond'
						},
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
					}]
				});
			});
			$(document).ready(function () {
				chart2 = Highcharts.chart('container2', {
					chart: {
						plotBackgroundColor: '#E6E6E6',
						type: 'spline',
						width: 740,
						height: 280
					},
					credits: { //版权信息
						enabled: false
					},
					exporting: { //导出
						enabled: false
					},
					title: { //标题
						text: ''
					},
					xAxis: {
						categories: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00',
							'7:00', '8:00', '9:00', '10:00', '11:00', '12:00',
							'13:00', '14:00', '15:00', '16:00', '17:00', '18:00',
							'19:00', '20:00', '21:00', '22:00', '23:00']
					},
					yAxis: {
						title: {
							text: '光照强度',
						},
						labels: {
							formatter: function () {
								return this.value;
							}
						}
					},
					tooltip: {
						crosshairs: true,
						shared: true,
						//valueSuffix: ' ℃'
					},
					plotOptions: {
						spline: { //曲线图
							marker: { //数据点标记
								radius: 4, //半径
								lineColor: '#666666',
								lineWidth: 1 
							}
						}
					},
					series: [{
						name: '光照强度',
						marker: {
							symbol: 'square'
						},
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
					}]
				});
			});
			function Func(){
				var xmlhttp;
				var year=document.getElementById("query_year");
				var month=document.getElementById("query_month");
				var day=document.getElementById("query_day");
				if(window.XMLHttpRequest)
				{
					//code for IE7+,Firefox,Chrome,Opera,Safari
					xmlhttp=new XMLHttpRequest();
				}
				else
				{
					//code for IE6,IE5
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
					if(xmlhttp.readyState==4 && xmlhttp.status==200)
					{
						var ret=JSON.parse(xmlhttp.responseText);
						if(ret.temp.length==0){
							document.getElementById("query_result").style.color='red';
							document.getElementById("query_result").innerHTML="查询失败! 暂无该日数据记录！";
						}
						else{
							for(var i=0;i<ret.temp.length;i++){
								ret.temp[i]=parseFloat(ret.temp[i]);
								ret.humi[i]=parseFloat(ret.humi[i]);
								ret.light[i]=parseInt(ret.light[i]);
							}
							var tab=document.getElementById("tab");
							var tab_row_count=tab.rows.length;
							for(var i=1;i<tab_row_count;++i){
								tab.deleteRow(i);
								tab_row_count=tab_row_count-1;
								i=i-1;
							}
							for(var j=0;j<ret.cmd.length;j++){
								document.getElementById("query_result1").innerHTML+='<tr><td>'+ret.time[j]+'</td><td>'+ret.user[j]+'</td><td>'+ret.cmd[j]+'</td></tr>';
							}
							document.getElementById("query_result").style.color='green';
							var tmp="查询成功！查询日期："+year.options[year.selectedIndex].value+"年"+month.options[month.selectedIndex].value+"月"+day.options[day.selectedIndex].value+"日";
							document.getElementById("query_result").innerHTML=tmp;
							chart1.series[0].update({data: ret.temp});
							chart1.series[1].update({data: ret.humi});
							chart2.series[0].update({data: ret.light});
						}
					}
					else{
					}
				}
				xmlhttp.open("GET","/cgi-bin/agricultural_cgi/query.cgi?year="+year.options[year.selectedIndex].value+"&month="+month.options[month.selectedIndex].value+"&day="+day.options[day.selectedIndex].value,true);
				xmlhttp.send();
			}
		</script>
	</head>
	<body>
		<!-- 导航栏 -->
		<div>
			<ul class="nav">
				<li><a href="base_config.html">数据监测</a></li>
				<li><a href="query_data.html">查询数据</a></li>
				<li><a href="user_info.html">用户信息</a></li>
				<li><a href="login.html">切换账号</a></li>
			</ul>
		</div>
		<!-- 页面标题 -->
		<h1>智慧农业-查询数据</h1><hr>
		<!-- <h3>查询日期中一天的温湿度数据变化情况</h3> -->
		<!-- 下拉菜单选择查询日期 -->
		<div id="select_date"> 
			<form id="query_date">
				查询日期： 
				<select name="query_year" id="query_year" class="query_year">
					<option value="2018">2018</option>
					<option value="2019">2019</option>
					<option value="2020">2020</option>
					<option value="2021">2021</option>
				</select> 年
				<select name="query_month" id="query_month" class="query_month">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select> 月
				<select name="query_day" id="query_day" class="query_day">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select> 日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" id="btn_submitdate" value="查询" onclick="Func()">
			</form>
		</div>
		
		<div id="left_class">
			<div>
				<!-- 曲线图显示查询数据 -->
				<div id="container1"></div>
				<div id="container2"></div>
			</div>
		</div>
		<div id="right_class">
			<div id="query_result">查询结果：暂无查询</div>
			<!-- <textarea name="query_record" id="query_record">
			</textarea> -->
			<table id="tab">
				<thead>
					<tr>
						<th>时间</th>
						<th>操作人员</th>
						<th>操作内容</th>
					</tr>
				</thead>
				<tbody id="query_result1">
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					<tr>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>



